<template>
  <div :class="$store.state.appPrefix + '-c-verify-input'">
    <el-input placeholder="请输入验证码" v-model="text" maxlength="4" @change="$handleChange" @keyup.enter.native="$handleEnter"></el-input>
    <img class="img-code" @click="$handleRefresh" :src="imageUrl" alt="">
  </div>
</template>

<script>

export default {
  name: 'verify-input',
  props: {
    imageUrl: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      text: '',
      timeStamp: '',
    };
  },
  watch: {
    value(val) {
      this.text = val
    }
  },
  mounted() {
  },
  methods: {
    $handleRefresh() {
      this.text = ''
      this.$emit('refresh')
    },
    $handleChange() {
      this.$emit('change', this.text.trim())
    },
    $handleEnter() {
      this.$emit('enter')
    }
  },
};
</script>
